<template>
  <div class="layout-sider-bar-container" :class="'layout-sider-bar-container--' + sidebarLayoutSkin">
    <el-menu
      v-if="sideBarMenuList.length > 0"
      :default-active="defaultActive"
      :collapse="sidebarFold"
      @open="handleOpen"
      @close="handleClose">
      <template v-if="sideBarMenuList.length === 1 && sideBarMenuList[0].list && sideBarMenuList[0].list.length > 0">
        <el-menu-item v-for="item in sideBarMenuList[0].list" :key="item.menuId" :index="item.menuId +''"
                      @click="gotoRouteHandle(item)">
          <icon-svg :name="item.icon || ''" style="font-size: 18px"></icon-svg>
          <span slot="title">{{ item.name }}</span>
        </el-menu-item>
      </template>
      <template v-if="sideBarMenuList.length > 1">
        <el-submenu :index="item.menuId +''" v-for="item in sideBarMenuList" :key="item.menuId">
          <template slot="title">
            <icon-svg :name="item.icon || ''" style="font-size: 18px"></icon-svg>
            <span>{{ item.name }}</span>
          </template>
          <el-menu-item :index="it.menuId + ''" v-for="it in item.list" :key="it.menuId" @click="gotoRouteHandle(it)">
            <icon-svg :name="item.icon || ''" style="font-size: 18px"></icon-svg>
            <span slot="title">{{ it.name }}</span>
          </el-menu-item>
        </el-submenu>
      </template>
    </el-menu>
  </div>
</template>

<script>
export default {
  name: 'LayoutSideBar',
  data() {
    return {
      dynamicMenuRoutes: []
    };
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    gotoRouteHandle(menu) {
      console.log('menuRoute', menu)
      console.log('this.dynMenuRoutes', this.dynamicMenuRoutes)
      let route = this.dynamicMenuRoutes.filter(item => item.meta.menuId === menu.menuId)
      console.log('route', route)
      if (route.length >= 1) {
        if (menu.type === -1) {
          this.$router.push(
            {
              name: route[0].name,
              query: {
                id: menu.menuId,
                childShowType: menu.childShowType,
                path: route.path
              },
            }
          )
        } else {
          this.$router.push({name: route[0].name})
        }
      }

    }
  },
  computed: {
    sidebarLayoutSkin: {
      get () { return this.$store.state.common.sidebarLayoutSkin }
    },
    sidebarFold: {
      get() {
        return this.$store.state.common.sidebarFold
      }
    },
    sideBarMenuList: {
      get() {
        return this.$store.state.common.sideBarMenuList
      }
    },
    defaultActive: function () {
      if (this.sideBarMenuList.length > 0 && this.sideBarMenuList[0].list && this.sideBarMenuList[0].list.length > 0) {
        return this.sideBarMenuList[0].list[0].menuId.toString();
      }
      return null
    },
  },

  created() {
    this.dynamicMenuRoutes = JSON.parse(sessionStorage.getItem('dynamicMenuRoutes') || '[]')
  },

  watch: {},
  mounted() {

  },
};
</script>

<style scoped lang="scss">
@import "src/assets/scss/variables.scss";

.layout-sider-bar-container {
  height: 100%;
  overflow: auto;
  .el-menu{
    height: 100%;
    .el-submenu {
      width: 200px;
    }
  }
}
</style>
